<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1、div -->
		<div id="app">
			<!-- 6、定义路由使用的超链接 -->
			<router-link to="/home">家</router-link>
			<router-link to="/dog">狗</router-link>
			<!-- 7、定义路由跳转之后，组件展示的位置，相对于一个div -->
			<router-view></router-view>
		</div>
		
		<!-- 5、定义组件的模板 -->
		<template id="homeTemplate">
			<div>
				{{name}}
			</div>
		</template>
		<template id="dogTemplate">
			<div>
				{{name}}
			</div>
		</template>
		
		
		<!-- 2、导入vue的js文件 -->
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 4、导入router的js文件 -->
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		
		<!-- 3、编写js代码 -->
		<script type="text/javascript">
			
			/* 5、定义局部组件 */
			let homeComponent = {
				data: function(){
					return{
						name: '我是组件家'
					}
				},
				template: "#homeTemplate",
				methods:{}
				
			}
			let dogComponent = {
				data: function(){
					return{
						name: '我是组件狗'
					}
				},
				template: "#dogTemplate",
				methods:{}
				
			}
			
			
			
			const vue = new Vue({
				el: "#app",
				data:{},
				methods:{},
				mounted() {
					
				}
			})
		</script>
		
		
	</body>
</html>
